<script setup lang="ts">
import { type Limit } from '@/types/limit'
import { withDefaults } from 'vue'
const emits = defineEmits(['querychange'])
const handleSizeChange = (e: number) => {
  emits('querychange', { type: 'pageSize', value: e })
}
const handleCurrentChange = (e: number) => {
  emits('querychange', { type: 'page', value: e })
}
withDefaults(defineProps<{ data: Limit }>(), {
  data: () => {
    return {
      page: 1,
      list_rows: 10,
      total: 0
    }
  }
})
defineExpose({})
</script>
<template>
  <div class="flex j-center">
    <el-pagination
      class="m-center"
      :current-page="data.page"
      :page-size="data.pageSize"
      :page-sizes="[10, 20, 30]"
      background
      layout="total, sizes, prev, pager, next,"
      :total="data.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped></style>
